<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>Encapsulate</title>

  <!-- pull in polymer -->
  <script src="../../../polymer/polymer.js"></script>
  
  <!-- import elements -->
  <link rel="import" href="../../../polymer-elements/polymer-view-source-link/polymer-view-source-link.html">
  <link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
  <link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
  <link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu/polymer-ui-menu.html">
  <link rel="import" href="../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html">
  <link rel="import" href="sample-encapsulated.html">
  
  <!-- regular styling -->
  <link rel="stylesheet" href="../../../polymer-ui-elements/basic.css">
  <link rel="stylesheet" href="index.css">
</head>

<body class="polymer-ui-body-text polymer-ui-dark-bg" theme="polymer-ui-dark-theme">

  <sample-encapsulated>
    <span id="logo"><img src="polymer.svg"> Polymer</span>

    <polymer-ui-toolbar id="toolbar" theme="polymer-ui-dark-theme">
      <polymer-ui-icon-button icon="drawer" onclick="document.querySelector('sample-encapsulated').toggle()"></polymer-ui-icon-button>
      <span fit>&nbsp;Encapsulate</span>
    </polymer-ui-toolbar>

    <polymer-ui-menu id="menu">
      <polymer-ui-menu-item icon="dialog"><a class="item-content" href="../3. But Widgets/">Previous</a></polymer-ui-menu-item>
      <!--<polymer-ui-menu-item icon="dialog"><a href="../6. Compose/">Next</a></polymer-ui-menu-item>-->
      <polymer-ui-menu-item icon="dialog"><a class="item-content" is="polymer-view-source-link">View Source</a></polymer-ui-menu-item>
    </polymer-ui-menu>

    <section id="main">
      Now we've <b>factored</b> all of the layout and dynamics into an encapsulation
      called <code>&lt;sample-encapsulated&gt;</code>.
      <br /><br />
      This page is built from one instance of <code>&lt;sample-encapsulated&gt;</code> 
      whose children are a <b>logo</b>, a <b>menu</b>, a <b>toolbar</b>, and <b>this text</b>.
      <br /><br />
      The actual page design is contained entirely in the encapsulation and 
      <code>index.html</code> contains only application <b>content</b>.
      <br /><br />
      This page no longer depends directly on the page, layout, or slider elements. 
      Those tools are now <b>hidden</b>, we need not think about them at all.
    </section>
  </sample-encapsulated>

</body>
</html>
